<template>
    <div class="product-detail-wrap">
        <div class="product-detail-init" v-if="loading" v-loading="true" />
        <nav class="product-bread" v-if="!loading">
            <nuxt-link v-for="(item, index) in classifyData" :key="item.id + '-' + index" :to="'/product?classify=' + item.id">{{item.name}}</nuxt-link>
            <a>{{ data.name || '' }}</a>
        </nav>
        <div class="product-detail" v-if="!loading">
            <div class="product-collect" @click="doCollect" v-loading="favLoading">
                <svg-icon v-if="fav" name="fav-action" class="fav"></svg-icon>
                <svg-icon v-else name="fav" class="fav"></svg-icon>
            </div>
            <section class="product-detail-design">
                <!-- :color.sync="actionColor.color_num" -->
                <ProductDetailSwiper :img_list="img_list" :color="'#eeeeee'" :detail='detail' />
                <div class="product-detail-specs">
                    <div class="product-detail-parameter">
                        <h1 v-text="detail.name || ''"></h1>
                        <div class="product-detail-print-areas">
                            <h3 class="product-str1">
                                <svg-icon name="dtg-icon" />
                                <span>DTG print areas</span>
                                <a @mousedown="active_switch = 2" href="#switch-anchor">Guide</a>
                            </h3>
                            <p v-html="(printList || []).join('&nbsp;/&nbsp;')"></p>
                        </div>
                        <div class="product-detail-print-areas" v-if="embPrintList.length">
                            <h3 class="product-str1">
                                <svg-icon name="emb-icon" />
                                <span>Embroidery areas</span>
                                <a @mousedown="handleSwitchClick(4)" href="#switch-anchor">Guide</a>
                            </h3>
                            <p v-html="(embPrintList || []).join('&nbsp;/&nbsp;')"></p>
                        </div>
                        <div class="product-detail-color">
                            <h3 class="product-str1">Colors</h3>
                            <div>
                                <CommonColorBlock v-for="item in colorList" :key="item.color_id" class="color-itembox" :color="item" @click.native="handleColor(item)" :active="item.color_id == actionColor.color_id"></CommonColorBlock>
                            </div>
                        </div>
                        <div class="product-detail-size">
                            <h3 class="product-str1">
                                <span>Sizes</span>
                                <button @click="size_guide_dialog = true">Guide</button>
                            </h3>
                            <div class="radiobox">
                                <!-- 选中状态 -->
                                <!-- :class="actionSize == item && 'span-active'" -->
                                <span v-for="item in sizeList" :key="item.size_id" :class="{disable: item.quality <= -999,active: actionSize.size_id == item.size_id}" @click="handleradioSize(item)" v-text="item.size_name"></span>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="top-price">
                            <!-- <h2>USD {{ totalPrice }}</h2> -->
                            <CommonLevelDiscount :price="actionSize.price" :level="detail" type="unit|discount|icon" />
                            <span class="create-blank" @click="createBlankTemplate" v-loading="blank_loading">
                                Create blank template
                            </span>
                        </div>
                        <nuxt-link class="top-btn common-button-bg" :to="'/designer?pid=' + spu">Start designing</nuxt-link>
                        <div class="top-adv">
                            Turnaround time: {{ detail.delivery_time }} business days
                        </div>
                    </div>
                </div>
            </section>
            <div class="product-detail-switch">
                <p class="switch-anchor" id="switch-anchor"></p>
                <button :class="{ active: item.value == active_switch }" v-for="item in switchOption" :key="item.value" v-text="item.label" @click="handleSwitchClick(item.value)"></button>
            </div>
            <ProductDetailDescription :detail.sync="detail" v-show="active_switch == 1"></ProductDetailDescription>
            <ProductDetailPrintDetail :detail.sync="detail" v-show="active_switch == 2"></ProductDetailPrintDetail>
            <ProductDetailInventory :detail.sync="detail" v-show="active_switch == 3"></ProductDetailInventory>
            <ProductDetailEmbGuide :detail.sync="detail" v-show="active_switch == 4"></ProductDetailEmbGuide>
        </div>
        <DesignerSaveDialog ref="saving" />
        <ProductSizeGuideDialog v-model="size_guide_dialog" :detail='detail'></ProductSizeGuideDialog>
    </div>
</template>

<script>
const Options = {
    size: [
        { name: "XXS", label: "XXS" },
        { name: "XS", label: "XS" },
        { name: "S", label: "S" },
        { name: "M", label: "M" },
        { name: "L", label: "L" },
        { name: "XL", label: "XL" },
        { name: "XXL", label: "2XL" },
        { name: "XXXL", label: "3XL" },
        { name: "XXXXL", label: "4XL" },
        { name: "XXXXXL", label: "5XL" },
    ],
    side: [
        {
            value: "Front side",
            label: "正面",
        },
        {
            value: "Back side",
            label: "背面",
        },
        {
            value: "Sleeve left",
            label: "左袖",
        },
        {
            value: "Sleeve right",
            label: "右袖",
        },
        {
            value: "Neck label outer",
            label: "外颈标",
        },
        {
            value: "Neck label inner",
            label: "内颈标",
        },
    ],
};
import { mapGetters } from "vuex";

export default {
    name: "ProductDetail",
    async asyncData ({ app, route }) {
        // data,
        // actionColor,
        const id = route.query.id;
        const init = {
            spu: '',
            id: 0,
            data: null,
        }

        if (process.server) {
            // getData
            const response = await app.$http("Product.getDetail/" + id);
            if (response.code == 0) {
                init.data = response.data || {};
                init.id = init.data.id;
                init.spu = init.data.spu;
            } else {
                app.router.push("/document/login-error");
            }
        }

        return init;
    },
    head (vm) {
        const list = (vm.classifyData || []).map((i) => i.name);
        const name = (vm.data || {}).name || "";
        const host = "PODpartner:Print-on-Demand Dropshipping";
        const keywords = [name, ...list.reverse(), host].filter(i => i);

        //在head中赋值
        return {
            title: keywords.join("-"),
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content: keywords.join("|"),
                },
                {
                    hid: "keywords",
                    name: "keywords",
                    content: keywords.join("|"),
                },
            ],
        };
    },
    data () {
        return {
            loading: false,
            actionColorId: '',
            actionSizeId: '',
            favLoading: false, //收藏loading

            // 空白模板
            blank_loading: false,
            dialog_saving: null,

            active_switch: 1,
            // 新商品详情新增弹窗
            size_guide_dialog: false,
        };
    },
    computed: {
        ...mapGetters({
            isLogin: "getIsLogin",
        }),
        ...mapGetters("user", {
            userInfo: "getUserInfo",
        }),
        switchOption () {
            const option = [
                { label: "Description", value: 1 },
                { label: "Print guide", value: 2 },
                { label: "Embroidery guide", value: 4 },
                { label: "Inventory", value: 3 },
            ]
            if (!this.detail?.emb_output_size) option.splice(2, 1);
            return option
        },
        detail () {
            let val = JSON.parse(JSON.stringify(this.data || {}));

            val.classify_name = (val.classify_name || "").split("/");
            val.feature_introduction = (val.feature_introduction || "").split("；");
            val.material = (val.material || "").split("；");
            val.weight = (val.weight || "").split("；");
            val.technology = (val.technology || "").split("；");
            val.maintain = (val.maintain || "").split("；");
            val.other_description = (val.other_description || "").split("；");


            try {
                if (val.template_design && typeof val.template_design == "string") {
                    val.template_design = JSON.parse(val.template_design)
                }
            } catch (error) {
                console.log(error);
            }


            try {
                if (val.mockup && typeof val.mockup == 'string') {
                    val.mockup = JSON.parse(val.mockup || '[]');
                }
            } catch (error) {
                console.log(error);
            }
            return val;
        },
        img_list: function () {
            let arr = [];
            let list = this.data.img_list;
            if (list && list.length > 0) {
                list.sort(function (a, b) {
                    return a.sort - b.sort;
                });
                list.map((i) => {
                    arr.push(this.$getImageUrl(i.img_url, "largest"));
                    // arr.push(this.$getImageUrl(i.img_url, "original"));
                    // arr.push(this.$getImageUrl(i.img_url, "original"));
                    // arr.push(this.$getImageUrl(i.img_url, "original"));
                    // arr.push(this.$getImageUrl(i.img_url, "original"));
                    // arr.push(this.$getImageUrl(i.img_url, "original"));
                });
                arr.splice(0, 1);
            }

            return arr;
        },
        totalPrice: function () {
            if (this.actionSize && this.actionSize.price) {
                return (this.actionSize.price / 100).toFixed(2);
            } else {
                return "--";
            }
        },
        //构造尺码表
        expoundSize () {
            const imperial = this.detail.english_system || [];
            const metric = this.detail.metric_system || [];
            const result = {
                imperial: { head: [], body: [] },
                metric: { head: [], body: [] },
            };

            imperial.map((item, index) => {
                if (index == 0) {
                    result.imperial.head.push("");
                    item.value.map((item) =>
                        result.imperial.head.push(item.size_name)
                    );
                }
                result.imperial.body.push(item);
            });

            metric.map((item, index) => {
                if (index == 0) {
                    result.metric.head.push("");
                    item.value.map((item) =>
                        result.metric.head.push(item.size_name)
                    );
                }
                result.metric.body.push(item);
            });

            return result;
        },

        // 面包屑导航
        classifyData () {
            let name = this.detail.classify_name || [];
            let cid = this.detail.classify || [];
            let obj = [];
            name.map((i, index) => {
                let id;
                if (index == 0) {
                    id = cid[0] * 100 + "";
                } else if (index == 1) {
                    id = cid[0] * 100 + cid[1] * 10 + "";
                } else if (index == 2) {
                    id = cid[0] * 100 + cid[1] * 10 + cid[2] * 1 + "";
                }
                obj.push({
                    name: i,
                    id,
                });
            });
            return obj;
        },

        //确认打印面
        printList () {
            let arr = [];
            let surface = (this.detail.printable_surface || "").split("|");
            let names = {
                "Front Side": "Front side",
                "Back Side": "Back side",
                "Sleeve Left": "Left sleeve",
                "Sleeve Right": "Right sleeve",
                "Long Sleeve Left": "Sleeve Left",
                "Long Sleeve Right": "Sleeve Right",
                "Neck Label Inner": "Inside neck label",
            };

            surface.map((item) => {
                const str = item.replace(/\s*-\s*.*/g, "");
                const name = names[str] || str;
                name && arr.push(name);
            });
            return [...new Set(arr)];
        },
        embPrintList () {
            const list = (this?.detail.piece_list || []).filter(item => item.type == 2)
            const nameMapping = {
                "Front Side": "Front",
                "Back Side": "Back",
                "Sleeve Left": "Left sleeve",
                "Sleeve Right": "Right sleeve",
                "Long Sleeve Left": "Sleeve Left",
                "Long Sleeve Right": "Sleeve Right",
                "Neck Label Inner": "Inside neck label",
            }

            return list.map(item => {
                return nameMapping[item.surface_name] ?? item.surface_name
            })
        },
        // 颜色
        colorList () {
            let ids = [];
            let arr = [];
            let list = (this.detail || {}).inventory_list || [];
            list.map((item) => {
                if (ids.indexOf(item.color_id) < 0) {
                    ids.push(item.color_id);
                    arr.push(item);
                }
            });
            arr.sort((v1, v2) => v1.color_sort - v2.color_sort);
            // if (arr.length > 0) this.handleColor(arr[0]);
            return arr;
        },

        // 尺码
        sizeList () {
            let color = this.actionColor.color_id || "";
            let list = (this.detail || {}).inventory_list || [];

            // 筛选之后的list
            let filter_list = list.filter((item) => item.color_id == color);
            // 排序
            filter_list.sort((v1, v2) => v1.size_sort - v2.size_sort);
            return filter_list;
        },

        // 当前颜色
        actionColor () {
            return this.colorList.filter(i => i.color_id == this.actionColorId)[0] || this.colorList[0];
        },

        // 当前尺码
        actionSize () {

            // 筛选出库存大于999的
            // 如果有选中的，就展示选中的
            // 如果没有，默认选中L码
            const sizeList = (this.sizeList || []).filter(i => i.quality > -999);
            const sizeListIds = sizeList.map(i => i.size_id);

            if (this.actionSizeId && sizeListIds.indexOf(this.actionSizeId) >= 0) {
                // id可用
                return sizeList.filter(i => i.size_id == this.actionSizeId)[0];
            } else if (sizeListIds.indexOf('M05') >= 0) {
                // 默认L码
                return sizeList.filter(i => i.size_id == 'M05')[0];
            } else {
                return sizeList[0];
            }
        },

        // 是否收藏
        fav () {
            if (!this.isLogin) {
                return false
            } else {
                let collect = (this.userInfo || {}).collect || "";
                let list = collect.split("|");
                return list.indexOf(String(this.id)) >= 0;
            }
        }
    },

    methods: {
        // 切换详情内容
        handleSwitchClick (value) {
            this.active_switch = value;
        },

        // 创建空白模板
        createBlankTemplate () {
            if (window.innerWidth < 960) {
                this.$uxMessage.warning('For a better user experience, please visit our website on a desktop browser.', 'Friendly reminder',);
                return
            }
            // 判断是否手机
            if (this.blank_loading) return;
            if (!this.isLogin) {
                this.$emit("global:userLogin", () => {
                    this.createBlankTemplate();
                });
                return;
            }

            // 拿到设计数据
            this.blank_loading = true;
            this.$http("Designer.getInfo", this.id).then(result => {
                if (result.code === 0) {


                    const data = result.data || {};
                    const option = {
                        spu: data.spu, // 商品spu
                        product_id: this.id, // 产品id
                        template_id: '', // 模板id，如果是二次编辑，这个值才会有
                        brand_label_id: '', // 如果有选中了领标
                        color_id: "", // 选中的颜色
                        pieces: [], // 设计面信息
                        models: [], // 模特信息
                        model_tag: '',
                    };

                    // 设计面
                    option.pieces = (data.piece_list || []).map((item, index) => {


                        return {
                            id: item.id || index,
                            type: item.type || 1,
                            surface_name: item.surface_name, // 画板名称
                            canvas_name: item.canvas_name, // 画板名称
                            mask_image: item.mask_image, // 遮罩图片，宽度高度与容器一至
                            outer_width: item.outer_width, // 容器宽度
                            outer_height: item.outer_height, // 容器高度
                            real_width: item.real_width, // 容器宽度
                            real_height: item.real_height, // 容器高度
                            canvas_zoom: item.canvas_zoom,
                            canvas_left: item.canvas_left, // 画板相对容器的左边的位置
                            canvas_top: item.canvas_top, // 画板相对容器的左边的位置
                            canvas_width: item.canvas_width, // 画板的宽度
                            canvas_height: item.canvas_height, // 画板的宽度
                            canvas_rotate: item.canvas_rotate, // 画板旋转角度
                            price: item.price || 0, // 设计面价格
                            layers: Array.isArray(item.layers) ? item.layers : JSON.parse(item.layers || '[]'),
                        };

                    });


                    option.models = (data.model_list || []).map((model, index) => {
                        let mapping = model.mapping ? JSON.parse(model.mapping || "[]") : {};
                        let mapping_type = Object.prototype.toString.call(mapping);
                        let is_array = mapping_type == "[object Array]";
                        let is_object = mapping_type == "[object Object]";

                        // 字段名都改变了，这里要特别注意！！！！！
                        mapping = is_array ? mapping : is_object ? [mapping] : [];
                        mapping = mapping.map((mapper) => {
                            // factor 设置默认值
                            return {
                                canvas_name: mapper.canvas_name,
                                height: mapper.height,
                                width: mapper.width,
                                rotate: mapper.rotate,
                                x: mapper.x,
                                y: mapper.y,
                                clip: mapper.clip || "",
                                variant_deform:
                                    parseFloat(mapper.variant_deform) || 0,
                                variant_factor:
                                    parseFloat(mapper.variant_factor) || 0,
                            };
                        });

                        return {
                            id: model.id,
                            surface_name: model.surface_name, // 画板名称
                            mask_image: model.mask_image, // 遮罩图片，宽度高度与容器一至
                            mask_opacity: model.mask_opacity || 0, // 遮罩透明度，默认为0
                            mask_color: model.mask_color || "", // 遮罩颜色，默认为空字符
                            model_type: model.model_type || 1, // 1旧版，2新版
                            model_tag: model.model_tag || 'hanging',
                            model_name: model.model_name || 'Hanging',
                            model_color: model.model_color || '{}',
                            outer_width: model.outer_width || 2048, // 容器宽度
                            outer_height: model.outer_height || 2048, // 容器高度
                            mapping_top: !!model.mapping_top, // 设计区是否置顶
                            mapping: mapping,
                        };
                    });


                    const user = this.$store.state.user || {}
                    const tag = data.model_tag || user.model_tag || 'hanging';
                    const tag_able = ['hanging', 'flat lay', 'model'].filter(i => option.models.find(model => model.model_tag == i))
                    option.model_tag = tag_able.indexOf(tag) >= 0 ? tag : tag_able[0];

                    this.blank_loading = false;
                    this.$refs.saving.doSaving(option);

                } else {
                    this.blank_loading = false;
                    this.$uxMessage.warning(result.data.msg);
                }
            })
        },


        //收藏商品、取消收藏
        async doCollect () {
            if (!this.isLogin) {
                this.$emit("global:userLogin", () => {
                    this.doCollect();
                });
                return;
            }
            let res;
            let type = "";
            let bol = false;
            this.favLoading = true;
            if (!this.fav) {
                res = await this.$http("Product.addCollectById/" + this.id);
                bol = true;
                type = "add";
            } else {
                res = await this.$http("Product.delCollectById/" + this.id);
                bol = false;
                type = "del";
            }
            if (res.code == 0) {
                this.setUserData(type, this.id);
                this.favLoading = false;
            } else {
                this.favLoading = false;
                this.$uxMessage.warning(res.msg);
            }
        },
        //更新userInfo
        setUserData (type, id) {
            let data = JSON.parse(JSON.stringify(this.userInfo));
            let list = [];
            if (data.collect != "") {
                list = data.collect.split("|");
            }
            if (type == "add") {
                list.push(id);
            } else {
                let index = list.indexOf(id);
                list.splice(index, 1);
            }

            data.collect = list.join("|");
            this.$store.dispatch("user/setUserInfo", data);
        },

        //请求数据
        async getData () {
            let id = this.$route.query.id;
            this.loading = true;
            let res = await this.$http("Product.getDetail/" + id);
            if (res.code == 0) {

                this.data = res.data;
                this.id = this.data.id;
                this.spu = this.data.spu;
                this.loading = false;
            } else {
                this.loading = false;
                this.$uxMessage.warning(res.msg);
            }
        },

        // //选择颜色
        handleColor (color) {
            this.actionColorId = color.color_id;
        },

        //单选尺码
        handleradioSize (size) {
            if (size.quality > -999) {
                this.actionSizeId = size.size_id;
            }
        },

        gotoDesigner () {
            this.$router.push({ path: "/designer", query: { pid: this.id } });
        },
    },
    created () {
        if (process.client && (!this.data || !this.data.spu)) {
            this.getData();
        }
    },
};
</script>

<style lang="scss" scoped>
$aborder: 1px solid #ea4c89;
$acolor: #ea4c89;
.product-bread {
    box-sizing: border-box;
    min-height: 64px;
    padding: 27px 0;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    line-height: 30px;
    a {
        position: relative;
        padding-right: 28px;
        font-size: 14px;
        line-height: 30px;
        color: #555555;
        &:hover {
            color: #ea4c89;
        }
        &:last-child {
            color: #000000;
            cursor: default;
        }
        &:after {
            content: '';
            position: absolute;
            right: 16px;
            margin-top: 0px;
            top: 50%;
            transform: rotate(45deg);
            width: 2px;
            height: 6px;
            background: #000;
            border-radius: 2px;
        }
        &:before {
            content: '';
            position: absolute;
            right: 16px;
            top: 50%;
            margin-top: -4px;
            transform: rotate(-45deg);
            width: 2px;
            height: 6px;
            background: #000;
            border-radius: 2px;
        }

        &:last-child {
            color: #000;
            &:before,
            &:after {
                display: none;
            }
        }
    }
}
.product-detail-wrap {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 1052px;
    padding: 0 20px;
    box-sizing: border-box;
    width: 100%;
    .product-detail-init {
        flex: 1;
        &::v-deep .el-loading-mask {
            background: none;
        }
    }
}
.product-detail {
    position: relative;
    // overflow: hidden;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.product-detail-design {
    width: 100%;
    padding-bottom: 78px;
    // border-bottom: 1px solid #dcdcdc;
    align-items: flex-start;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 610px;
    .product-detail-specs {
        margin-left: 32px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        .product-detail-parameter {
            h1 {
                min-height: 28px;
                margin: 0 30px 36px 0;
                font-size: 24px;
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                color: #000000;
                line-height: 28px;
            }
        }
        .product-detail-color,
        .product-detail-size,
        .product-detail-print-areas {
            & > div {
                display: flex;
                flex-direction: row;
                align-items: center;
                flex-wrap: wrap;
            }
        }
        .product-detail-size {
            margin-top: 36px;
        }
        .product-detail-print-areas {
            min-height: 46px;
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #000000;
            line-height: 16px;
            margin-bottom: 36px;
        }
        .product-detail-color {
            & > div {
                margin: 0 -4px;
            }
        }
        .top-price {
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            justify-content: space-between;
            & > .level-discount {
                font-size: 32px;
                line-height: 36px;
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;

                &[level='2'] {
                    color: #c5a886;
                }
                &[level='3'] {
                    color: #8e9ead;
                }
                &[level='4'] {
                    color: #d6b360;
                }
                &[level='5'] {
                    color: #4babcc;
                }
                &[level='6'] {
                    color: #de5d8f;
                }
                &[level='7'] {
                    color: #9878d1;
                }

                &::v-deep {
                    span[name='discount'] {
                        margin-left: 8px;
                    }
                    span[name='icon'] {
                        margin-left: 4px;
                        width: 24px;
                        height: 24px;
                        background-size: 24px 24px;
                    }
                }
            }
            & > .create-blank {
                font-size: 14px;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                color: #087196;
                text-decoration: underline;
                cursor: pointer;
                user-select: none;
                &:hover {
                    text-decoration: none;
                    color: #287e9c;
                }
                &::v-deep {
                    & > .el-loading-mask {
                        .el-loading-spinner {
                            height: 100%;
                            top: 0;
                            margin-top: 0;
                            svg {
                                margin-top: -4px;
                                position: absolute;
                                width: 30px;
                                height: 30px;
                            }
                        }
                    }
                }
            }

            margin: 0 0 14px;
        }
        .top-btn {
            cursor: pointer;
            width: 100%;
            height: 52px;
            background: #ea4c89;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 600;
            color: #ffffff;
            text-align: center;
            margin-bottom: 14px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            &:hover {
                background: #c94175;
                color: #ffffff;
            }
        }
        .top-adv {
            display: flex;
            flex-direction: row;
            align-items: center;
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #000000;
            line-height: 16px;
        }
        .top-send {
            ::v-deep {
                .el-loading-spinner {
                    transform: translateY(-50%);
                    margin: 0;
                    .circular {
                        width: 20px;
                        height: 20px;
                    }
                }
            }

            display: flex;
            flex-direction: row;
            align-items: center;
            > h3 {
                font-size: 14px;
                font-weight: 600;
                color: #000000;
            }
            div {
                margin: 0 8px 0 0;
                &:first-child {
                    ::v-deep {
                        .selectbox-dropmain {
                            width: 280px !important;
                        }
                    }
                }

                &:nth-child(2) {
                    ::v-deep {
                        .selectbox-dropmain {
                            width: 260px !important;
                        }
                    }
                }
            }
        }
    }
}
.product-detail-switch {
    width: 100%;
    // border-bottom: 1px solid #dcdcdc;
    font-size: 0;
    margin: 0 0 22px;
    position: relative;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    &::after {
        z-index: -1;
        content: "";
        display: block;
        height: 1px;
        width: 100%;
        background-color: #dcdcdc;
    }
    .switch-anchor {
        opacity: 0;
        position: absolute;
        top: -78px;
    }
    button {
        margin: 0 12px -1px 0;
        padding: 0 8px;
        height: 38px;
        border-radius: 0;
        border: none;
        box-sizing: border-box;
        background: none;
        color: #555555;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #555555;
        font-size: 16px;
        border-bottom: 2px solid transparent;
        &:hover {
            color: #ea4c89;
            border-color: #ea4c89;
        }
        &.active {
            color: #ea4c89;
            border-color: #ea4c89;
            background: #f2f2f2;
            border-radius: 4px 4px 0px 0px;
        }
    }
}

//选择框
.radiobox {
    margin: -8px 0 24px;

    span {
        &.active {
            color: $acolor;
            border: $aborder;
        }
        user-select: none;
        &:last-child {
            margin-right: 0 !important;
        }
        &:hover {
            color: $acolor;
            border: $aborder;
        }
        font-family: Roboto-Medium, Roboto;
        cursor: pointer;
        box-sizing: border-box;
        margin: 8px 8px 0 0;
        width: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 32px;
        box-sizing: border-box;
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #d9d9d9;
        font-size: 12px;
        color: #555555;
        line-height: 32px;
        &.disable {
            // pointer-events: none;
            cursor: not-allowed;
            background: #f6f6f6;
            border-color: #dcdcdc;
            color: #bfbfbf;
        }
    }
}

.fav {
    cursor: pointer;
    font-size: 24px;
    width: 24px;
    height: 24px;
    stroke: #9e9ea0;
}

.mid-font1 {
    color: #999999;
    font-size: 16px;
}
.mid-font2 {
    margin-left: 20px;
    color: #666;
    font-size: 16px;
}

.top-lfet {
    width: 352px;
    height: 581px;
    margin-right: 70px;
}
.product-detail-describe {
    width: 100%;
    display: flex;
    flex-direction: column;
    .describe-description {
        margin-bottom: 94px;
    }
    .describe-advantage {
        padding: 0 0 80px 20px;
        border-bottom: #dcdcdc 1px solid;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin: 0 0 20px 0;
        > section {
            width: 300px;
            > h3 {
                margin: 4px 0 10px;
                font-size: 24px;
                font-weight: 600;
                color: #000000;
            }
            li {
                position: relative;
                &[disable='true'] {
                    display: none;
                }
                &::before {
                    content: '';
                    display: flex;
                    position: absolute;
                    left: -16px;
                    top: 10px;
                    width: 6px;
                    height: 6px;
                    border-radius: 3px;
                    background: #555555;
                }
            }
        }
    }
}
.describe-title {
    font-size: 20px;
    font-weight: bold;
    color: #000000;
    line-height: 28px;
    margin-bottom: 20px;
}
.detail-str4 {
    font-size: 14px;
    font-weight: 400;
    color: #000000;
    line-height: 22px;
}

.product-str1 {
    font-size: 14px;
    font-family: Roboto-Medium, Roboto;
    font-weight: 500;
    color: #000000;
    line-height: 16px;
    margin-bottom: 12px;
    display: flex;
    & > svg {
        width: 16px;
        height: 16px;
        margin-right: 10px;
    }
    & > button,
    a {
        height: 16px;
        font-size: 12px;
        line-height: 16px;
        color: #087196;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        text-decoration: underline;
        cursor: pointer;
        border: none;
        padding: 0;
        margin-left: 6px;
        &:hover {
            color: #075e7d;
            text-decoration: none;
        }
    }
}
.tr-side {
    align-items: flex-start;
    margin: 20px 0 30px;
}
.color-itembox {
    min-height: 24px;
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
    margin: 4px;
}

.color-item {
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.06);
    width: 24px;
    height: 24px;
    border-radius: 2px;
    margin-bottom: 12px;
}
.color-item-action {
    position: absolute;
    top: 0;
    left: 0;
}

.product-collect {
    position: absolute;
    right: 0;
    top: 0;

    &:hover .fav {
        stroke: #ea4c89;
    }

    &::v-deep {
        .el-loading-spinner {
            margin-top: -15px;
            .circular {
                width: 24px;
                height: 24px;
            }
        }
    }
}

@media (max-width: 960px) {
    .product-detail-wrap {
        padding: 0 14px;
    }

    .product-bread {
        padding: 4px 0;
        min-height: initial;
        a {
            word-break: break-all;
        }
    }

    .product-detail-design {
        flex-direction: column;
        height: auto;
        display: block;
        padding-bottom: 48px;
        .product-detail-specs {
            margin-left: 0;
            margin-top: 24px;
            display: block;

            .product-detail-parameter {
                h1 {
                    margin: 0;
                    font-size: 20px;
                    line-height: 26px;
                }
            }

            .top-price > .level-discount {
                margin-top: 16px;
                font-size: 28px;
                line-height: 28px;
            }

            .top-btn {
                height: 46px;
                margin-bottom: 12px;
            }
        }
    }

    .describe-title {
        font-size: 24px;
        line-height: 26px;
        text-align: center;
        margin-bottom: 12px;
    }
    .describe-str1 {
        font-size: 14px;
        font-weight: 400;
        color: #000000;
        line-height: 26px;
    }
    .product-str1 {
        margin-bottom: 16px;
    }

    .product-detail-print-areas {
        margin-top: 24px;
        margin-bottom: 32px !important;
    }
    .product-detail-design .product-detail-specs .product-detail-size {
        margin-top: 20px;
        .radiobox {
            & > span {
                margin: 12px 14px 0 0;
            }
        }
    }
    .product-detail-color {
        & > div {
            margin: 0 -7px !important;
        }
        .color-itembox {
            margin: 0 7px 12px;
        }
    }

    .product-detail-expound-size {
        margin-top: 32px;
        margin-bottom: 32px;
        padding-bottom: 32px;
        h2 {
            font-size: 24px;
            font-weight: bold;
            color: #000000;
            line-height: 26px;
            margin-bottom: 24px;
        }

        .tablebox {
            .tablebox-radio {
                justify-content: center;

                div {
                    width: 120px;
                }
            }

            .table {
                margin-top: 24px;
                display: flex;
                position: relative;

                &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 1px;
                    height: 100%;
                    background-color: #d9d9d9;
                    z-index: 1;
                }

                &::after {
                    content: '';
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    height: 1px;
                    background-color: #d9d9d9;
                }

                th,
                td {
                    width: auto;
                    line-height: 18px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 66px;
                    width: auto;
                    padding: 0 5px;
                    border: none;
                    position: relative;
                    box-sizing: border-box;

                    &::before {
                        content: '';
                        position: absolute;
                        right: 0;
                        top: 0;
                        width: 1px;
                        height: 100%;
                        background-color: #d9d9d9;
                    }

                    &::after {
                        content: '';
                        position: absolute;
                        right: 0;
                        top: 0;
                        width: 100%;
                        height: 1px;
                        background-color: #d9d9d9;
                    }
                }

                thead {
                    display: flex;
                    flex-direction: column;
                    tr {
                        display: flex;
                        flex-direction: column;
                        th {
                            padding: 0 10px;
                            min-width: 40px;
                        }
                    }
                }

                tbody {
                    display: flex;
                    flex: 1;
                    tr {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                    }
                }
            }

            & > h3 {
                padding-left: 20px;
                position: relative;
                font-size: 13px;
                color: #000000;
                line-height: 16px;

                i {
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }
        }
    }

    .product-detail-supplement {
        margin-bottom: 8px;
        .product-detail-supplement-icon {
            margin: 0;
            padding: 0 12px;
            display: flex;
            justify-content: center;
            svg {
                width: 32px;
                height: 32px;
                margin: 12px;
            }
        }

        .detail-str4 {
            font-size: 18px;
            font-weight: 400;
            color: #000000;
            line-height: 28px;
        }

        .product-detail-supplement-instructions {
            ul {
                margin-top: 12px;
            }
        }

        .product-detail-supplement-other p {
            text-align: center;
        }
    }
}
@media (max-width: 380px) {
    .top-price {
        flex-direction: column !important;
        align-items: flex-start !important;
        flex-wrap: wrap;
        margin: 0 0 2px !important;
        & > * {
            margin-bottom: 16px;
        }
    }
}
</style>
